<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/8/29
  Time: 16:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //展示第一页
            checkbook(1)
        })
        $(document).on("click", "[name='query']", function () {
            checkbook(1)
        })

        $(document).on("click","input[alt]",function () {
            checkbook($(this).attr("alt"))
        })

        $(document).on("click","[name='exit']",function (e) {
            e.preventDefault();
            var boo =window.confirm("确定退出吗?")
            if(boo){
                window.location.href="/asd/index.jsp"
            }
        })

        function checkbook(pageindex) {
            var booktype = $("[name='booktype']").val()
            var bookname = $("[name='bookname']").val()
            var isborrow = $("[name='isborrow']").val()



            //1窗体加载后，发送异步请求 获得分页数据；
            $.get("bookshow/showAll",
                {"pageindex": pageindex, "booktype": booktype, "bookname": bookname, "isborrow": isborrow},
                function (ph) {



                JSON.stringify(ph)
                    if(ph.listIndex.length===0){
                        $("tbody").empty()
                        $("tfoot").empty()

                        $("<tr>" +
                            "<td colspan='6'><h5>对不起,没有符合查询数据</h5></td>" +
                            "</tr>").appendTo("tbody")
                    }else{
                        //1.获得ph里面的集合循环遍历到tbody
                        $("tbody").empty()
                        for (var i = 0; i < ph.listIndex.length; i++) {

                            var list = ph.listIndex[i];
                            $("<tr>\n" +
                                "            <td>" + list.bookcode + "</td>\n" +
                                "            <td>" + list.booktype + "</td>\n" +
                                "            <td>" + list.bookname + "</td>\n" +
                                "            <td>" + list.bookauthor + "</td>\n" +
                                "            <td>" + list.publishpress + "</td>\n" +
                                "            <td>" + (list.isborrow === 1 ? "已借阅" : "<a href=''>未借阅</a>") + "</td>\n" +
                                "            </tr>\n").appendTo("tbody")
                        }
                        $("tbody tr:even").css("background-color","lightblue")
                        //2.获得ph里的属性，动态添加到tfoot里面

                        $("tfoot").empty()
                        if(ph.pageIndex!=1){//上一页 最后一页只有上一页
                            $("<input type='button' alt='1' value='首页'>").appendTo("tfoot")
                            $("<input type='button' alt='"+(ph.pageIndex-1)+"' value='上一页'>").appendTo("tfoot")
                        }
                        if(ph.pageIndex!=ph.pageCount){
                            $("<input type='button' alt='"+(ph.pageIndex+1)+"' value='下一页'>").appendTo("tfoot")
                            $("<input type='button' alt='"+ph.pageCount+"' value='尾页'>").appendTo("tfoot")
                        }
                        $("<b>第"+ph.pageIndex+"页/共"+ph.pageCount+"页"+"</b>").appendTo("tfoot")
                    }



            })
        }
    </script>

</head>
<body>
<form>
    <table border="1px">
        <caption>图书借阅系统</caption>
        <!-- 1. 查询条件行（合并4列，与表头列数匹配） -->
        <thead>
        <tr>
            <td colspan="4">
                <b>图书分类:</b>
                <select name="booktype">
                    <option value="-1">--请选择--</option>
                    <option value="1">小说</option>
                    <option value="2">文学</option>
                    <option value="3">IT</option>
                    <option value="4">艺术</option>
                    <option value="5">科幻</option>
                    <option value="6">管理</option>
                </select>
            </td>
            <td><b>图书名称:</b>
                <input type="text" name="bookname">
            </td>

            <td> <b>是否借阅:</b>
                <select name="isborrow">
                    <option value="-1">--请选择--</option>
                    <option value="1">已借阅</option>
                    <option value="0">未借阅</option>
                </select></td>

            <td><input type="button" name="query" value="查询"></td>

        </tr>
        <!-- 2. 用户信息行（合并6列） -->
        <tr>
            <td >
                <b>当前用户：</b>
                <label><%=request.getParameter("uname")%></label>
<%--                <label value="<%request.getParameter("uname");%>"/><!-- 从session获取用户名 -->--%>
                <a name="exit" href="">退出</a>

            </td>
        </tr>
        <!-- 3. 表头行（6个单元格，与数据列对应） -->
        <tr>
            <th>图书编号</th>
            <th>图书分类</th>
            <th>图书名称</th>
            <th>作者</th>
            <th>图书出版社</th>
            <th>借阅状态</th>
        </tr></thead>

        <!-- 4. 数据行区域 -->
        <tbody></tbody>
        <!-- 5. 分页区域（可选，可后续扩展） -->
        <tfoot>

        </tfoot>
    </table>
</form>
</body>
</html>
